<template>
  <view>
    <swiper indicator-dots autoplay interval="3000" duration="500" circular>
      <swiper-item v-for="item in list" :key="item.id" class="swiper-item">
        <navigator :url="'/subpkg/characters/characters?characters_id=' + item.id" style="height: 100%;width: 100%;">
          <image
            v-if="item.image || item.avatar || item.cover || item.img"
            :src="item.image || item.avatar || item.cover || item.img"
            mode="aspectFit"
          />
          <view v-else class="swiper-fallback">
            <text>{{ item.name }}（{{ item.element }}）⭐{{ item.rarity }}</text>
          </view>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <view class="nav-list">
     <view class="nav-item" v-for="(item, i) in navList" :key="i">
       <view class="">
         {{item.guojia}}
       </view>
     </view>
  </view>
  <view class="floor-list">
    <!-- 楼层 item 项 -->
    <view class="floor-item" v-for="(item, i) in city" :key="i">
      <!-- 楼层标题 -->
      <view class="">
        {{item.guojia}}
      </view>
      <view class="floor-img-box">
        <!-- 左侧大图片的盒子 --> 
        <navigator class="left-img-box" url="/subpkg/goodslist/goodslist">
          <image :src="item.img" :style="{width: item.img_width + 'rpx'}" mode="widthFix"></image>
        </navigator>
        <!-- 右侧 4 个小图片的盒子 -->
        <view class="right-img-box">
          <navigator class="right-img-item" v-for="(item2, i2) in city" :key="i2" v-if="i2 !== 0" url="/subpkg/goodslist/goodslist">
            <image :src="item2.img" mode="widthFix" :style="{width: item2.img_width + 'rpx'}"></image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list:[],
        navList:[],
        city:[]
      };
    },
    onLoad(){
      //获取角色数据
      this.getSwiperlist()
      this.getNavlist()
      this.getcity()
    },
    methods:{
      async getSwiperlist(){
       const { data: res } = await uni.$http.get('/api/characters')
       if(res && (res.code===0 || res.status===200)){
         this.list = res.data || []
       }
       console.log('characters:', this.list)
      },
      async getNavlist(){
       const { data: res } = await uni.$http.get('/api/navlist')
       if(res && (res.code===0 || res.status===200)){
         this.navList = res.data || []
         
       }
       console.log('navlist:', this.navList)
      },
      async getcity(){
       const { data: res } = await uni.$http.get('/api/city')
       if(res && (res.code===0 || res.status===200)){
         this.city = res.data || []
         
       }
       console.log('city:', this.city)
      }
    },
  }
</script>

<style lang="scss">
 swiper{
   height: 330rpx;
   .swiper-item{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #fff;
     image{
       width: 100%;
       height: 100%;
     }
   }
   .swiper-fallback{
     height: 100%;
     display:flex;
     align-items:center;
     justify-content:center;
     background:#f5f5f5;
   }
 }
 .nav-list {
   display: flex;
   justify-content: space-around;
   margin: 15px 0;
 
   .nav-img {
     width: 128rpx;
     height: 140rpx;
   }
 }
 .floor-title {
   height: 60rpx;
   width: 100%;
   display: flex;
 }
 .right-img-box {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
 }
 
 .floor-img-box {
   display: flex;
   padding-left: 10rpx;
 }
</style>
